<template>
  <view class="page">
    <Header
      :title="`单词测评（${currentWordIndex + 1}/${wordList.length}）`"
    ></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <view class="tabs_list">
              <view
                class="tabs_item tabs_item1"
                :class="{ active: currentStep === '1' }"
              >
                <view class="tabs_num">
                  <text>1</text>
                </view>
                <view class="tabs_img" v-if="'1' === currentStep"> </view>
                <view class="tabs_text"> 发音测试 </view>
              </view>
              <view
                class="tabs_item tabs_item2"
                :class="{ active: currentStep === '2' }"
              >
                <view class="tabs_text"> 看词选意 </view>
                <view class="tabs_img" v-if="'2' === currentStep"> </view>
                <view class="tabs_num">
                  <text>2</text>
                </view>
              </view>
              <view class="tabs_line">
                <view></view>
                <view></view>
                <view></view>
                <view></view>
                <view></view>
              </view>
            </view>
            <view class="tabs_bg"></view>
          </view>
          <view class="box">
            <template v-if="currentStep === '1'">
              <PronunciationTest
                v-if="wordData"
                :wordData="wordData"
                @next="nextWord1"
                @save="saveWordRecord1"
                :key="componentKey"
              ></PronunciationTest>
            </template>
            <template v-else-if="currentStep === '2'">
              <WordingTest
                v-if="wordData"
                :wordData="wordData"
                @next="nextWord2"
                @save="saveWordRecord2"
                :key="componentKey"
              ></WordingTest>
            </template>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="completeShow"
      :zoom="false"
      mode="center"
      width="100%"
      height="100%"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="tips">
        <view class="tips_content">
          <view class="tips_text"> 恭喜你完成了单词测评 </view>
          <view class="tips_text"> 请开始第二阶段的单词练习吧 </view>
          <view class="tips_btn" @click="startLearning()">
            <text>进入单词练习</text>
          </view>
          <view class="tips_img">
            <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/xiaolian.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getWords, saveWordLearningRecord } from "@/api/sync";
export default {
  components: {},
  data() {
    return {
      bookId: "",
      chapterId: "",
      currentStep: "1",
      wordList: [],
      currentWordIndex: 0,
      wordData: null,
      componentKey: 0,
      completeShow: false,
    };
  },
  onLoad(options) {
    this.bookId = options.bookId;
    this.chapterId = options.chapterId;
    this.getData();
  },
  methods: {
    getData() {
      getWords("dccs", this.chapterId).then((res) => {
        this.wordList = res.data;
        this.getWordInfo();
      });
    },
    getWordInfo() {
      this.wordData = this.wordList[this.currentWordIndex];
    },
    nextWord1(flag) {
      // flag  true为正确通过  false为三次未通过
      this.nextStep("1", flag);
    },
    saveWordRecord1(score, isPass) {
      console.log("上传记录");
      let params = {
        score: score,
        pass: isPass ? 1 : 0,
        step: "2",
        type: "dccs",
        wordId: this.wordData.id,
      };
      saveWordLearningRecord(params);
    },
    nextWord2() {
      this.nextStep("2");
    },
    saveWordRecord2(isCorrect) {
      console.log("上传记录");
      let params = {
        pass: isCorrect ? 1 : 0,
        step: "5",
        type: "dccs",
        wordId: this.wordData.id,
      };
      saveWordLearningRecord(params);
    },
    nextStep(step, flag) {
      this.componentKey++;
      if (step === "1") {
        if (flag) {
          this.currentStep = "2";
        } else {
          this.nextStep("2");
        }
      } else if (step === "2") {
        if (this.currentWordIndex === this.wordList.length - 1) {
          this.completeShow = true;
          return;
        }
        this.currentStep = "1";
        this.currentWordIndex++;
        this.getWordInfo();
      }
    },
    startLearning() {
      uni.reLaunch({
        url: `/pages/word/wordSelect?bookId=${this.bookId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./wordTest";
</style>
